<template>
  <div  ref="content">
      <div>
        <vue2-org-tree
            :data="data"
            :label-class-name="labelClassName"
            @on-expand="onExpand"
            @on-node-click="NodeClick"
            @on-node-mouseover="onMouseover"
            @on-node-mouseout="onMouseout"
            :renderContent="renderContent"
            collapsable
        />
    </div>

    <el-dialog :title="positions.id !== 'qwer123we'?'岗位':'部门'" :visible.sync="dialogFormVisible" width="20%">
      <el-form :model="positions" >

        <el-form-item label="岗位" label-width="80px" v-if="positions.id !== 'qwer123we'">
          <el-input v-model="positions.position" autocomplete="off"></el-input>
        </el-form-item>

        <el-form-item label="部门名称" label-width="80px" v-if="positions.id === 'qwer123we'">
          <el-input v-model="positions.deptName" autocomplete="off"></el-input>
        </el-form-item>

        <el-form-item label="部门总管" label-width="80px" v-if="positions.id === 'qwer123we'">
          <el-select v-model="positions.empId" placeholder="请选择员工">
            <el-option :label="obj.name" :value="obj.id" v-for="obj in list" :key="obj.id"></el-option>
          </el-select>
        </el-form-item>

      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancel">取 消</el-button>
        <el-button type="primary" @click="renew">确 定</el-button>
      </div>

    </el-dialog>

    <div>
      <el-drawer title="我是标题" :visible.sync="drawer" :with-header="false">

        <el-radio-group v-model="size">
        </el-radio-group>

        <el-descriptions class="margin-top" title="个人信息" :column="1" :size="size" border>

          <template slot="extra">
            <el-button type="primary" size="small" @click="toPdf">导出pdf</el-button>
          </template>

          <el-descriptions-item>
            <template slot="label">
              <i class="el-icon-picture-outline-round"></i>
              头像
            </template>
            <el-col :span="12">
              <div class="demo-basic--circle">
                <div class="block">
                  <el-avatar :size="emp.avatar" :src="emp.avatar"></el-avatar>
                </div>
              </div>
            </el-col>
          </el-descriptions-item>

          <el-descriptions-item>
            <template slot="label">
              <i class="el-icon-user"></i>
              用户名
            </template>
            {{ emp.name }}
          </el-descriptions-item>

          <el-descriptions-item>
            <template slot="label">
              <i class="el-icon-female" v-if="emp.gender === '男'"></i>
              <i class="el-icon-male" v-else></i>
              性别
            </template>
            {{ emp.gender }}
          </el-descriptions-item>

          <el-descriptions-item>
            <template slot="label">
              <i class="el-icon-pie-chart"></i>
              年龄
            </template>
            {{ emp.age }}
          </el-descriptions-item>

          <el-descriptions-item>
            <template slot="label">
              <i class="el-icon-mobile-phone"></i>
              手机号
            </template>
            {{ emp.phone }}
          </el-descriptions-item>

          <el-descriptions-item>
            <template slot="label">
              <i class="el-icon-office-building"></i>
              联系地址
            </template>
            {{ emp.address }}
          </el-descriptions-item>

          <el-descriptions-item>
            <template slot="label">
              <i class="el-icon-school"></i>
              毕业学校
            </template>
            <el-tag size="small">{{emp.graduationSchool}}</el-tag>
          </el-descriptions-item>

          <el-descriptions-item>
            <template slot="label">
              <i class="el-icon-reading"></i>
              学历
            </template>
            <el-tag size="small">{{emp.education}}</el-tag>
          </el-descriptions-item>

          <el-descriptions-item>
            <template slot="label">
              <i class="el-icon-time"></i>
              工作年份
            </template>
            <el-tag size="small">{{emp.workTime}} 年</el-tag>
          </el-descriptions-item>

          <el-descriptions-item>
            <template slot="label">
              <i class="el-icon-office-building"></i>
              工作部门
            </template>
            <el-tag size="small">{{emp.deptName}} </el-tag>
          </el-descriptions-item>

          <el-descriptions-item>
            <template slot="label">
              <i class="el-icon-office-building"></i>
              岗位
            </template>
            <el-tag size="small">{{emp.position}} </el-tag>
          </el-descriptions-item>

        </el-descriptions>

      </el-drawer>
    </div>


  </div>
</template>

<script>
import {organization,insertPositions,} from '@/api/core/dept/dept'
import {notLeader,selectById} from '@/api/core/manage/emp'

export default {
  data(){
    return{
      dialogFormVisible: false,
      positions:{},
      labelClassName: "bg-color-orange1",
      basicInfo: { id: null, label: null },
      basicSwitch: false,
      data: {},
      list:[],
      drawer: false,
      size: 'medium',
      emp:{}
    }
  },
  created(){
    this.getOrganization()
  },
  methods:{
    toPdf(){
      this.$PDFSave(this.$refs["content"], this.emp.name);
    },
    //渲染节点
    renderContent(h, data) {
      let renderMessage;
      let a;
      if (data.avatar.length > 0){
         renderMessage = (<el-avatar src={data.avatar}>
         </el-avatar>)
         a = (<el-link onClick={() => {this.selectEmp(data.id)}}>
           查看
           <i className="el-icon-view el-icon--right">

           </i>
         </el-link>)
      }else if(data.name.substr(0,2)=== '岗位'){

      }else if (data.name === '李志达'){
        renderMessage = (<el-row>
          <el-button icon="el-icon-edit" circle onClick={() => {this.addPosition('qwer123we')}}>

          </el-button>
            </el-row>
      )
      }else {
        renderMessage = (
        <el-row>
          <el-button icon="el-icon-edit" circle onClick={() => {this.addPosition(data.id)}}>
          </el-button>
        </el-row>
        )
      }
      return (
          <div>
            <div>
              <i class="el-icon-user-solid">
              </i>
              <div>&nbsp;</div>
              <span>{data.label}</span>
              <div>&nbsp;</div>
              <div style="font-size:8px;line-height:20px;">{data.name}</div>
              <div>&nbsp;</div>
              <div>{renderMessage}</div>
              <div>{a}</div>
            </div>
          </div>
      );
    },

    async personalEmp(id){
      const {data:res} = await selectById(id)
      this.emp = res.data.emp
    },

    selectEmp(id){
      this.drawer = true
      this.personalEmp(id)
    },

    addPosition(id){
      this.positions.id = id
      this.dialogFormVisible = true
      this.getNotLeader()
    },

    async renew(){
      const {data:res} = await insertPositions(this.positions)
      if (res.code === 200){
        this.$message({
          message: '岗位添加成功',
          type: 'success'
        });
      }
      this.positions = {}
      await this.getOrganization()
      this.dialogFormVisible = false
    },
    cancel(){
      this.positions = {}
      this.dialogFormVisible = false
    },

    async getOrganization(){
      const {data:res} = await organization()
      this.data = res.data.rep
    },
    //鼠标移出
    onMouseout(e, data) {
      this.basicSwitch = false;
    },
    //鼠标移入
    onMouseover(e, data) {
      this.basicInfo = data;
      this.basicSwitch = true;
      var floating = document.getElementsByClassName("floating")[0];
      floating.style.left = e.clientX + "px";
      floating.style.top = e.clientY + "px";
    },
    //点击节点
    NodeClick(e, data) {
      console.log(e, data);
    },
    //默认展开
    toggleExpand(data, val) {
      if (Array.isArray(data)) {
        data.forEach(item => {
          this.$set(item, "expand", val);
          if (item.children) {
            this.toggleExpand(item.children, val);
          }
        });
      } else {
        this.$set(data, "expand", val);
        if (data.children) {
          this.toggleExpand(data.children, val);
        }
      }
    },
    collapse(list) {
      list.forEach(child => {
        if (child.expand) {
          child.expand = false;
        }
        child.children && this.collapse(child.children);
      });
    },
    //展开
    onExpand(e, data) {
      if ("expand" in data) {
        data.expand = !data.expand;
        if (!data.expand && data.children) {
          this.collapse(data.children);
        }
      } else {
        this.$set(data, "expand", true);
      }
    },

    async getNotLeader(){
      const {data:res} = await notLeader()
      this.list = res.data.list
    }

  }

}
</script>

<style lang="less">
  .bg-color-orange1{
    color: #000;
    width:auto;
    font-size:1px;
    background-color:#f6f7f9
  };
</style>


